import 'package:flutter/material.dart';

class BasicDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ContainerDemo();
  }
}

/**
 * Container 容器
 */

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
//      color: Colors.grey[100],
      //添加背景图
      decoration: BoxDecoration(
          image: DecorationImage(
              image: NetworkImage(
                  'https://resources.ninghao.org/images/the-old-fashioned.png'),
              alignment: Alignment.topCenter,
              //添加重复
//        repeat: ImageRepeat.repeat,
              //填充模式
              fit: BoxFit.cover,
              //添加滤镜
              colorFilter: ColorFilter.mode(
                //滤镜颜色
                Colors.indigoAccent[400].withOpacity(0.5),
                // 混合模式
                BlendMode.hardLight,
              ))),
      child: Row(
        //主轴对齐方式
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            child: Icon(Icons.pool, size: 32.0, color: Colors.white),
// 1           color: Color.fromRGBO(3, 54, 255, 1.0),
            padding: EdgeInsets.all(16.0),
            margin: EdgeInsets.all(8.0),
            width: 90.0,
            height: 90.0,
            decoration: BoxDecoration(
              //这个与上面1注释的部分冲突
              color: Color.fromRGBO(3, 54, 255, 1.0),
              //添加边框
              border: Border.all(
                color: Colors.red,
                width: 3.0,
                style: BorderStyle.solid,
              ),
              //添加圆角:circular:四个角都添加圆角;only单独设置4个角
//              borderRadius: BorderRadius.only(
//                topLeft: Radius.circular(16.0),
//                topRight: Radius.circular(8.0),
//                bottomLeft: Radius.circular(10.0),
//                bottomRight: Radius.circular(32.0),
//              ),
              //添加阴影,形状
              boxShadow: [
                BoxShadow(
                  //控制阴影的偏移量,
                  offset: Offset(6.0, 7.0),
                  color: Color.fromRGBO(16, 20, 188, 1.0),
                  //阴影的模糊程度
                  blurRadius: 1.0,
                  //阴影扩散的程度,正数：扩大；负数：缩小
                  spreadRadius: -3.0,
                ),
              ],
              //形状,circle和borderRadius冲突
              shape: BoxShape.circle,
              //渐变，LinearGradient线性渐变，RadialGradient镜像渐变
//              gradient: RadialGradient(colors: [
//                Color.fromRGBO(7, 102, 255, 1.0),
//                Color.fromRGBO(3, 28, 128, 1.0),
////              ]),
              gradient: LinearGradient(colors: [
                Color.fromRGBO(7, 102, 255, 1.0),
                Color.fromRGBO(3, 28, 128, 1.0),
              ], begin: Alignment.topCenter, end: Alignment.bottomCenter),
            ),
          ),
        ],
      ),
    );
  }
}

/**
 * 行内多样式的文字
 */
class RichTextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        text: '您好',
        style: TextStyle(
            color: Colors.deepPurpleAccent,
            fontSize: 37.0,
            //字体样式-italic 倾斜
            fontStyle: FontStyle.italic,
            //设置字体粗细
            fontWeight: FontWeight.w100),
        //同一行其他文字显示样式
        children: [
          TextSpan(
            text: '.net',
            style: TextStyle(
              fontSize: 30.0,
              color: Colors.grey,
            ),
          ),
        ],
      ),
    );
  }
}

/**
 * 普通文字
 */
class TextDemo extends StatelessWidget {
  final TextStyle _textStyle = TextStyle(
    //文字大小
    fontSize: 18.0,
  );

  final String _name = '李白';

  final String _author = '将进酒';

  @override
  Widget build(BuildContext context) {
    return Text(
      '$_name《$_author》测试数据-测试数据-测试数据-测试数据-测试数据-测试数据-测试数据-测试数据-测试数据-测试数据-测试数据-测试数据-测试数据-测试数据-测试数据-测试数据-测试数据-测试数据-测试数据',
      //文字内容显示对齐方式
      textAlign: TextAlign.center,
      //文字样式
      style: _textStyle,
      //文字内容显示的行数
      maxLines: 3,
      //显示maxLines行数，溢出部分显示样式,ellipsis表示省略符号
      overflow: TextOverflow.ellipsis,
    );
  }
}
